<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if与v-show渲染</title>
</head>
<body>

    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- v-if指令是根据表达式的值和属性来有条件的判断是否渲染元素 -->
        <p v-if="isShow">第一段</p>
        <!-- 
            <p v-if="true">第一段</p>
            <p v-if="false">第一段</p> 
        -->

        <!-- v-else 必须接着v-if，如果v-if不满足，调用v-else，也是v-else=tru -->
        <p v-else>第二段</p>

        <!-- v-else-if 接着v-if来使用，如果不满足，则先进入v-else-if 进行判断 -->

        <p v-if="isShow">优秀</p>
        <p v-else-if>良好</p>
        <p v-else-if></p>
        <p v-else-if></p>
        <p v-else></p>

        <!-- 响应式UI -->

        <!-- v-show 效果与v-if效果相同 ，只有一次渲染用v-if 多次用v-show -->

    </div>
    <script>
       let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                isShow:true,


          }
       })
    </script>
    
</body>
</html>